<template>
  <view>
    <!-- 商品列表渲染 -->
    <view class="goods-list">
      <!-- 通过滑动单元格改造结构，用于实现左滑删除操作 -->
      <u-swipe-action>
        <u-swipe-action-item
          v-for="item in cartList"
          :key="item.goods_id"
          :options="options"
          @click="swipeActionItemClick"
          :name="item.goods_id"
        >
          <view class="cart-item">
            <!-- radio 小程序组件库自带的 -->
            <radio
              :checked="item.goods_select"
              color="#EB4450"
              @tap="changeSelect(item.goods_id)"
            />
            <view class="cart-count">
              <!-- uView 组件库的 步进器 -->
              <u-number-box
                :value="item.goods_count"
                :name="item.goods_id"
                @change="changeCount"
                @overlimit="overlimitDelete($event, item.goods_id)"
              />
            </view>
            <!-- hover-class="none" 取消链接组件按下时的灰色样式 -->
            <navigator
              class="goods-item"
              hover-class="none"
              :url="`/pages/goods_detail/goods_detail?goods_id=${item.goods_id}`"
            >
              <!-- 商品图片 -->
              <image
                class="goods-image"
                :src="item.goods_small_logo"
                mode="aspectFit"
              />
              <!-- 商品信息 -->
              <view class="goods-info">
                <view class="goods-name">{{ item.goods_name }}</view>
                <view class="goods-price">{{ item.goods_price }}</view>
              </view>
            </navigator>
          </view>
        </u-swipe-action-item>
      </u-swipe-action>
    </view>
    <!-- 底部操作栏占位 -->
    <view v-if="cartList.length !== 0" class="bottom-bar">
      <!-- 固定定位的操作栏  -->
      <view class="bottom-bar-fixed">
        <view class="select">
          <radio
            @tap="changeAllSelect"
            class="select-radio"
            :checked="isAllSelect"
            color="#EB4450"
          >
            全选
          </radio>
          <text class="select-radio"></text>
        </view>
        <!-- 合计 -->
        <view class="total">
          <text class="total-name">合计：</text>
          <text class="total-price">{{ selectCartListPrice }}</text>
        </view>
        <!-- 结算 -->
        <view @tap="gotoPay" class="account"
          >去结算({{ selectCartListCount }})</view
        >
      </view>
    </view>
    <!-- 购物车空状态，当购物车列表长度为 0 的时候渲染 -->
    <view v-if="cartList.length === 0" :style="{ paddingTop: '10vh' }">
      <u-empty mode="car" icon="http://cdn.uviewui.com/uview/empty/car.png">
        <navigator
          url="/pages/index/index"
          open-type="switchTab"
          hover-class="none"
          :style="{ marginTop: '20rpx' }"
        >
          <u-button type="primary">去首页看看</u-button>
        </navigator>
      </u-empty>
    </view>
  </view>
</template>

<script>
import { mapGetters, mapState } from 'vuex'

export default {
  data() {
    return {
      // 配置左滑删除按钮
      options: [
        {
          text: '删除',
          style: {
            backgroundColor: '#f56c6c',
          },
        },
      ],
    }
  },
  computed: {
    // 通过计算属性配合辅助函数获取 cartList
    ...mapState(['cartList']),
    // 通过辅助函数获取 getters 数据
    ...mapGetters([
      'isAllSelect',
      'selectCartListCount',
      'selectCartListPrice',
    ]),
  },
  methods: {
    // 1. 给单选按钮绑定 tap 事件
    changeSelect(goods_id) {
      // 2. 获取原购物车列表数据
      const cartList = [...this.cartList]
      // 3. 查找点击元素的下标
      const index = cartList.findIndex((v) => v.goods_id === goods_id)
      // 🚨4. 选中状态取反
      cartList[index].goods_select = !cartList[index].goods_select
      // 5. 更新 vuex 数据
      this.$store.commit('setCartList', cartList)
    },
    // 1. 给步进器组件绑定 change 事件
    // 解构出参数：value：输入框当前值，name：步进器标识符
    changeCount({ value, name }) {
      // 2. 获取原购物车列表数据
      const cartList = [...this.cartList]
      // 🚨3. 查找点击元素的下标，name 存储了 goods_id
      const index = cartList.findIndex((v) => v.goods_id === name)
      // 🚨4. 修改商品数量
      cartList[index].goods_count = value
      // 5. 更新 vuex 数据
      this.$store.commit('setCartList', cartList)
    },
    // 超过范围阈(yù)值时触发，minus 已达最小值
    async overlimitDelete(type, goods_id) {
      // 是否已达达最小值
      if (type === 'minus') {
        // 删除前显示模态弹窗，用户二次确认
        const [error, res] = await uni.showModal({
          title: '温馨提示',
          content: '是否删除商品',
          confirmText: '删除',
          confirmColor: '#f00',
        })
        // 用户点击确认按钮
        if (res.confirm) {
          // 调用删除商品逻辑
          this.delCart(goods_id)
        }
      }
    },
    // 1. 删除购物车商品
    delCart(goods_id) {
      // 2. 获取原购物车列表数据
      const cartList = [...this.cartList]
      // 3. 查找点击元素的下标
      const index = cartList.findIndex((v) => v.goods_id === goods_id)
      // 🚨4. 根据下标删除商品
      cartList.splice(index, 1)
      // 5. 更新 vuex 数据
      this.$store.commit('setCartList', cartList)
    },
    // 1. 侧滑按钮点击事件
    swipeActionItemClick(obj) {
      // 2. 根据 goods_id 删除商品
      this.delCart(obj.name)
    },
    // 1. 点击全选按钮
    changeAllSelect() {
      // 🚨2. 把全选状态取反
      const bl = !this.isAllSelect
      // 3. 获取原购物车列表数据
      const cartList = [...this.cartList]
      // 🚨4. 遍历修改所有小选状态
      cartList.forEach((item) => {
        item.goods_select = bl
      })
      // 5. 更新 vuex 数据
      this.$store.commit('setCartList', cartList)
    },
    // 1. 点击结算按钮
    gotoPay() {
      // 2. 判断用户是否有选中商品
      if (this.selectCartListCount === 0) {
        return uni.showToast({ icon: 'none', title: '请选择结算商品~' })
      }
      // 3. 跳转到结算页
      uni.navigateTo({ url: '/pages/pay/pay' })
    },
  },
}
</script>

<style lang="scss">
// 商品列表
.goods-list {
  .goods-item {
    display: flex;
    padding: 25rpx;
    .goods-image {
      width: 190rpx;
      height: 190rpx;
    }
    .goods-info {
      flex: 1;
      font-size: 24rpx;
      // 垂直方向两端对齐
      display: flex;
      flex-direction: column;
      justify-content: space-between;
      padding: 20rpx;
      .goods-name {
        // 多行超出隐藏
        overflow: hidden;
        -webkit-line-clamp: 2;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
      }
      .goods-price {
        color: #eb4450;
        // 前面的价格符号
        &::before {
          content: '￥';
          font-size: 80%;
          margin-right: 5rpx;
        }
      }
    }
  }
}
// 购物车列表项
.cart-item {
  display: flex;
  align-items: center;
  padding-left: 20rpx;
  border-bottom: 1rpx solid #ddd;
  position: relative;
  // 清除最后一项的底边
  &:last-child {
    border-bottom: none;
  }
  // 步进器外层盒子，定位实现
  .cart-count {
    position: absolute;
    // 体验优化细节：扩大盒子范围，防止用户误操作
    // background-color: pink;
    padding: 20rpx;
    bottom: 0;
    right: 0;
  }
}

// 底部操作栏
.bottom-bar {
  // 占位用
  height: 100rpx;
  // 定位的操作栏
  .bottom-bar-fixed {
    height: 80rpx;
    position: fixed;
    z-index: 99;
    left: 0;
    right: 0;
    bottom: 0;

    border-top: 1px solid #eee;
    background-color: #fff;
    display: flex;
    align-items: center;
    padding: 0 20rpx;

    .select {
      .select-radio {
        font-size: 24rpx;
        color: #999;
      }
    }

    .total {
      flex: 1;
      display: flex;
      align-items: center;
      margin-left: 40rpx;
      .total-name {
        font-size: 24rpx;
      }

      .total-price {
        color: #eb4450;
      }
    }

    .account {
      background-color: #eb4450;
      color: #fff;
      font-size: 22rpx;
      width: 150rpx;
      height: 52rpx;
      border-radius: 26rpx;
      display: flex;
      justify-content: center;
      align-items: center;
    }
  }
}
</style>
